{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
~}}

<SyncHeader @title="Secrets Sync" />

<div class="tabs-container box is-bottomless is-marginless is-paddingless">
  <nav class="tabs" aria-label="destination tabs">
    <ul>
      <LinkTo @route="secrets.overview" data-test-tab="Overview">Overview</LinkTo>
      <LinkTo @route="secrets.destinations" data-test-tab="Destinations">Destinations</LinkTo>
    </ul>
  </nav>
</div>

<Toolbar>
  <ToolbarFilters>
    <SearchSelect
      @options={{this.destinationTypes}}
      @objectKeys={{array "id" "name"}}
      @passObject={{true}}
      @selectLimit={{1}}
      @disallowNewItems={{true}}
      @placeholder="Filter by type"
      @inputValue={{if this.typeFilter (array this.typeFilter)}}
      @onChange={{fn this.onFilterChange "type"}}
      class="is-marginless"
      data-test-filter="type"
    />
    <SearchSelect
      @options={{this.destinationNames}}
      @objectKeys={{array "id" "name"}}
      @passObject={{true}}
      @selectLimit={{1}}
      @disallowNewItems={{true}}
      @placeholder="Filter by name"
      @inputValue={{if @nameFilter (array @nameFilter)}}
      @onChange={{fn this.onFilterChange "name"}}
      class="is-marginless has-left-padding-s"
      data-test-filter="name"
    />
  </ToolbarFilters>
  <ToolbarActions>
    <ToolbarLink @route="secrets.destinations.create" @type="add" data-test-create-destination>
      Create new destination
    </ToolbarLink>
  </ToolbarActions>
</Toolbar>

{{#if @destinations.meta.filteredTotal}}
  <div class="has-bottom-margin-s">
    {{#each @destinations as |destination index|}}
      <ListItem
        @linkPrefix={{this.mountPoint}}
        @linkParams={{array "secrets.destinations.destination.secrets" destination.type destination.name}}
        as |Item|
      >
        <Item.content>
          <div>
            <Icon @name={{destination.icon}} data-test-destination-icon={{index}} />
            <span data-test-destination-name={{index}}>
              {{destination.name}}
            </span>
          </div>
          <code class="has-text-grey is-size-8" data-test-destination-type={{index}}>
            {{destination.typeDisplayName}}
          </code>
        </Item.content>

        <Item.menu>
          {{#if destination.destinationPath.isLoading}}
            <li class="action">
              <LoadingDropdownOption />
            </li>
          {{else}}
            <li>
              <LinkTo
                class="has-text-black has-text-weight-semibold"
                data-test-details
                @route="secrets.destinations.destination.details"
                @models={{array destination.type destination.name}}
                @disabled={{not destination.canRead}}
              >
                Details
              </LinkTo>
            </li>
            <li>
              <LinkTo
                class="has-text-black has-text-weight-semibold"
                data-test-edit
                @route="secrets.destinations.destination.edit"
                @models={{array destination.type destination.name}}
                @disabled={{not destination.canEdit}}
              >
                Edit
              </LinkTo>
            </li>
            {{#if destination.canDelete}}
              <ConfirmAction
                data-test-delete
                @isInDropdown={{true}}
                @buttonText="Delete"
                @confirmMessage="The destination will be permanently deleted and all the secrets will be unsynced. This cannot be undone."
                @onConfirmAction={{fn this.onDelete destination}}
              />
            {{/if}}
          {{/if}}
        </Item.menu>
      </ListItem>
    {{/each}}
    <Hds::Pagination::Numbered
      @currentPage={{@destinations.meta.currentPage}}
      @currentPageSize={{@destinations.meta.pageSize}}
      @route="secrets.destinations"
      @showSizeSelector={{false}}
      @totalItems={{@destinations.meta.filteredTotal}}
      @queryFunction={{this.paginationQueryParams}}
      data-test-pagination
    />
  </div>
{{else}}
  <EmptyState @title={{this.noResultsMessage}} />
{{/if}}